<template>
   <ContentBase>
    <div class="card" v-for="user in users" :key="user.id" @click="open_user_profile(user.id)"> <!-- 等价于(user.id) => open_user_profile -->
      <div class="card-body">
        <div class="row">
          <div class="col-1 img-field" >
            <img class="img-fluid" :src="user.photo" alt=""> <!-- :是v-bind的简写，加了之后会取img中的值，而不是它的字符串 -->
          </div>

          <div class="col-11">
            <div class="username">{{user.username}}</div>
            <div class="follower-count">{{user.followerCount}}</div>
          </div>
        </div>
      </div>
    </div>
   </ContentBase>
  </template>
  
  <script>
import ContentBase from '@/components/ContentBase.vue';
import $ from "jquery"
import { ref } from 'vue';
import router from "@/router/index"
import { useStore } from 'vuex';
  
  export default {
    name: 'UserListView',
    components: {
      ContentBase,
    },

    setup() {
      const store = useStore(); // 访问全局变量
      let users = ref([]);
      $.ajax({
        url:"https://app165.acapp.acwing.com.cn/myspace/userlist/",
        type:"get",
        success(resp) {
          users.value = resp;
        },
        error(resp) {
          console.log(resp);
        }
      })

      const open_user_profile = (userId) => {
        if (store.state.user.is_login) {
          router.push({
            name: "UserProfileView",
            params: {
              userId,
            }
          })
        } else {
          router.push({
            name: "LoginView"
          })
        }
      }
      return {
        users,
        open_user_profile
      }
    }
  }

  
  </script>
  
  <style scoped>
img{
  border-radius: 50%;
}

.username{
  font-weight: bold;
}
.follower-count{
  font-size: 12px;
  color: gray;
  height: 50%;
}

.card{
  margin-bottom: 20px;
  cursor: pointer;
}

.img-field { /* 竖直居中 */
    display: flex;
    flex-direction: column; /* 将主轴变为竖直方向 */
    justify-content: center;
}

.card:hover{
  box-shadow: 2px 2px 10px lightgray;
  transition: 500ms;
}
  </style>